<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    </meta>
    <title>用户注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(function () {
            $("#submit_reg").click(function () {
                let username = $("#username").val();
                let password = $("#password").val();
                let email = $("#email").val();

                let user = {
                    "username": username,
                    "password": password,
                    "email": email
                }
                $.ajax({
                    url: "user/crud",
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(user),
                    dataType: "json",
                    success: function (result) {
                        alert(result.data);
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="container-fluid"
     style="height: 923px ;">
    <div class="container" align="center" style="height:680px ;box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.21);">

        <table class="form4" width="800px" id="regist" style="text-align: left;">
            <tr>
                <th style="padding: 28px 0 8px 0; font-size: 18px">用户名：</th>
                <td style="padding: 28px 0 8px 0; font-size: 16px"><input class="gray" name='username' id="username"
                                                                          type="text" value="" tabindex="1"/>
                    <label id="namemsg">请填写用户名，格式为4-20个字符，可以为字母，数字下划线和中文</label>
                </td>
            </tr>
            <tr>
                <th style="padding: 8px 0 8px 0; font-size: 18px">设置密码：</th>
                <td style="padding: 8px 0 8px 0; font-size: 16px"><input class="gray" type="password"
                                                                         name='password' id="password"
                                                                         tabindex="2"/>
                    <label id="passwordmsg">填写登录密码，6-32个字符</label>
                </td>
            </tr>
            <tr>
                <th style="padding: 8px 0 8px 0; font-size: 18px">确认密码：</th>
                <td style="padding: 8px 0 8px 0; font-size: 16px"><input class="gray" type="password"
                                                                         name='repassword' id="repassword"
                                                                         tabindex="3"/>
                    <label id="repasswordmsg">重复上面所填写的密码</label>
                </td>
            </tr>
            <tr>
                <th style="padding: 8px 0 8px 0; font-size: 18px">电子邮箱：</th>
                <td style="padding: 8px 0 8px 0; font-size: 16px"><input class="gray" name='email' type="email"
                                                                         id="email" tabindex="5">
                    <label id="emailmsg">请填写正确的邮箱地址，该邮箱用于激活账号</label>
                </td>
            </tr>
            <tr>
                <th style="padding: 8px 0 8px 0; font-size: 18px">验证码：</th>
                <td style="padding: 8px 0 8px 0; font-size: 16px"><input type='text' class='gray_s' name='checkcode'
                                                                         id="checkcode" alt='填写下面图片所示的字符'/>
                    <label><span style="color: red">填写下面图片所示的字符</span></label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input id="submit_reg" type="button" value="同意以下条款，提交"
                           style=" height:50px;font-size: 20px;background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);"/><label></label>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
